<template>
  <div class="full-height bg-white page-content content padding-20 detail-maintenance-plan scrollbar">
    <div style="height: calc(100% - 40px)" class="scrollbar overflow-auto full-width">
      <div class="plan-title ">计划编号：{{detailData.scheduleNo}}</div>
      <device-table ref="device_table"/>
    <q-separator style="flex: 0"/>
    <div class="q-mt-md">
      <div class="plan-title q-mb-md">保养信息</div>
      <detail-dialog
          :headList="headList"
          :detailData="detailData"
          :colNumber="3"
          style="margin: 0px"
        ></detail-dialog>
    </div>
    <!-- table -->
    <div class="page-content">
              <q-table :data="tableData"
                       :columns="columns"
                       row-key="id"
                       class="myTable scroll stick-to-top inherit"
                       :loading="isTableLoading"
                       :pagination.sync="pagination"
                       style="max-height: 400px; margin: 0"
                       :hide-bottom="tableData.length > 0"
                       color="primary">
              <template v-slot:body-cell-index="props">
                <q-td>
                  {{props.row.__index + 1}}
                </q-td>
              </template>
              <template v-slot:body-cell-criteria="props">
                <q-td>
                  {{props.row.criteria | toHorizontalLine }}
                </q-td>
              </template>
          </q-table>
    </div>
    <!--      part -table -->
      <div class="page-content q-mt-lg" style="max-height: 500px;width: 100%">
        <div class="plan-title q-mb-md">备件信息</div>
        <q-table
          :data="partTableData"
          :columns="columnsPart"
          row-key="id"
          class="scroll stick-to-top "
          :loading="isTableLoading"
          :pagination.sync="pagination"
          :hide-bottom="partTableData.length > 0"
          no-data-label="暂无数据"
          color="primary"
        >
          <template v-slot:body-cell-index="props">
            <q-td>
              {{ props.row.__index + 1 }}
            </q-td>
          </template>
        </q-table>
      </div>
    <div class="q-mt-md" style="word-break: break-all">
      备注: {{remark | toHorizontalLine}}
    </div>
    </div>
    <q-inner-loading :showing="isLoading" style="z-index: 99">
      <q-spinner-gears size="50px" color="primary" />
    </q-inner-loading>
    <q-separator style="flex: 0"/>
    <div class="dialog-footer text-center margin-t-10" style="padding-bottom: 0px">
          <q-btn outline label="关闭" color="primary" @click="onClose" class="btn"/>
    </div>
  </div>
</template>

<script>
import deviceTable from './common/device-table'
import { getScheduleById } from 'src/boot/maintenance/maintenance-plan'
import { mapGetters, mapMutations } from 'vuex'
const newLocal = '无'
export default {
  name: 'detail-maintenance-plan',
  components: { deviceTable },
  data () {
    return {
      headList: {
        maintenanceTypeName: '保养类型',
        startDate: '计划开始日期',
        assignedDateName: '派单时间',
        recurRuleFreqName: '循环周期',
        estimatedTimeName: '计划保养时长',
        assignedOperatorNameList: '保养人员',
        pausedFrequencyName: '限制保养',
        maintenanceProgramName: '保养项目'
      },
      detailData: {},
      isTableLoading: false,
      isLoading: false,
      tableData: [],
      partTableData: [],
      remark: '',
      pagination: {
        rowsPerPage: 0
      },
      columns: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'contentName', label: '项目内容', align: 'left', field: 'contentName' },
        { name: 'criteria', label: '判断基准', align: 'left', field: 'criteria' }
      ],
      columnsPart: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'sparePartNumber', label: '备件编号', align: 'left', field: 'sparePartNumber' },
        { name: 'sparePartName', label: '备件名称', align: 'left', field: 'sparePartName' },
        {
          name: 'sparePartCategory',
          label: '所属分类',
          align: 'left',
          field: 'sparePartCategory'
        },
        { name: 'sparePartSpec', label: '规格', align: 'left', field: 'sparePartSpec' },
        { name: 'outCount', label: '数量', align: 'left', field: 'outCount' }
      ]
    }
  },
  beforeRouteEnter (to, from, next) {
    if (to.name === 'detailMaintenancePlan') {
      next(vm => {
        vm.getList()
      })
    }
  },
  computed: {
    ...mapGetters(['footprint'])
  },
  mounted () {},
  methods: {
    initData () {
      this.detailData = {}
      this.tableData = []
      this.remark = ''
      this.$refs.device_table.initData([])
    },
    onClose () {
      const footprint = this.footprint.filter(v => !v.link.includes('detail-maintenance-plan'))
      this.set_footprint(footprint)
      this.$router.push({ path: `/main/repair/maintenance-plan` })
    },
    setDetailData (params) {
      this.detailData = params
      this.detailData['startDate'] = this.$utils.setDateOSI(params.startDate, false, 'YYYY-MM-DD')
      this.detailData['maintenanceTypeName'] = this.$getEnum(this.Enums.MAINTENANCE_TYPE, params.maintenanceType).desc
      this.detailData['recurRuleFreqName'] = this.$getEnum(this.Enums.MAINTENANCE_CYCLE, params.recurRuleFreq).desc
      this.detailData['assignedOperatorNameList'] = params.assignedCriteria === 1 ? '当班操作工' : params.assignedOperatorNameList.join()
      this.detailData['estimatedTimeName'] = params.assignedCriteria === 2 ? `${params.estimatedTime} ${this.$getEnum(this.Enums.PLAN_TIME_UNIT, params.estimatedTimeUnit).desc}` : ''
      // 限制保养
      this.setPausedFrequency(params)
      // 派单时间
      this.setAssignedDate(params)
    },
    setAssignedDate ({ assignedAdvanceDays, assignedHours, assignedMinutes }) {
      const hours = String(assignedHours).length === 1 ? `0${assignedHours}` : assignedHours
      const minutes = String(assignedMinutes).length === 1 ? `0${assignedMinutes}` : assignedMinutes
      const member = this.$getEnum(this.Enums.ORDER_TIME, assignedAdvanceDays).desc
      this.detailData.assignedDateName = `${member} ${hours}:${minutes}`
    },
    setPausedFrequency (params) {
      if (params.recurRuleFreq === 'MONTHLY') {
        this.detailData.pausedFrequencyName = `${params.pausedMonths.join()}月`
        return
      }
      if (!params.pausedFrequency) {
        this.detailData.pausedFrequencyName = newLocal
        return
      }
      if (params.pausedFrequency === 'WEEKLY') {
        this.detailData.pausedFrequencyName = `每周${params.pausedDays.map(v => this.$getEnum(this.Enums.ALL_WEEK, v).day).join()}`
      } else {
        this.detailData.pausedFrequencyName = `每月${params.pausedMonthDays.join()}号`
      }
    },
    getList () {
      this.isLoading = true
      // 重置数据
      this.$nextTick(() => {
        this.initData()
      })
      const id = this.$route.query.id
      getScheduleById(id).then((res) => {
        this.isLoading = false
        const ret = res.data
        // 保养信息
        this.setDetailData(ret)
        // 保养项目内容
        this.tableData = ret.maintenanceItems
        // 备件 清单
        this.partTableData = ret.spareParts
        // 设备信息
        this.$refs.device_table.initData(ret.devices)
        // 备注
        this.remark = ret.remark || ''
      }).catch((err) => {
        this.isLoading = false
        console.log(err)
      })
    },
    ...mapMutations({
      'set_footprint': 'SET_FOOTPRINT'
    })
  }
}
</script>

<style scoped lang="scss">
.detail-maintenance-plan {
  .dialog-footer{
    padding-bottom:10px;
    .btn{
      width:96px;
      min-height: 32px;
      max-height: 32px;
      box-sizing: border-box;
    }
  }
}
</style>
